<template>
  <div class="ai-message-box" :class="{ 'is-streaming': isStreaming }" @contextmenu.prevent="showRightMenu($event)">
    <!-- AI头像和名称 -->
    <div class="ai-header">
      <div class="ai-avatar">
        <head-image :name="'小K'" :size="32" :url="''" :id="2"></head-image>
      </div>
      <div class="ai-info">
        <span class="ai-name">
          <i class="fas fa-robot ai-robot-icon"></i>
          小K
        </span>
        <span class="ai-time">{{ formattedSendTime }}</span>
      </div>
      <!-- AI状态指示器 -->
      <div class="ai-status" :class="{ 'active': isStreaming }">
        <div class="status-dot"></div>
        <span class="status-text">{{ isStreaming ? '回复中' : '在线' }}</span>
      </div>
    </div>

    <!-- @用户名显示（仅群聊AI消息） -->
    <div v-if="displayAtUserName" class="at-user-section">
      <span class="at-user-name">{{ displayAtUserName }}</span>
    </div>

    <!-- AI消息内容容器 -->
    <div class="ai-content-container">
      <!-- 思考阶段 - 仅在思考时显示 -->
      <div v-if="streamType === 'thinking'" class="thinking-section">
        <div class="thinking-header">
          <div class="thinking-title">
            <i class="fas fa-brain thinking-icon"></i>
            <span class="thinking-label">小K正在思考ing</span>
            <span class="thinking-time-live">{{ formatThinkingTime(currentThinkingDuration) }}</span>
          </div>
          <div class="thinking-progress">
            <div class="progress-bar">
              <div class="progress-fill"></div>
            </div>
            <div class="thinking-dots">
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="dot"></span>
            </div>
          </div>
        </div>
        <div class="thinking-content" @contextmenu.prevent="showRightMenu($event)">
          <streaming-text
            :content="content"
            :is-streaming="isStreaming"
            @content-updated="$emit('content-updated')"
          />
        </div>
      </div>

      <!-- 内容阶段 - 显示思考完成和回复内容 -->
      <div v-if="streamType === 'content' || streamType === 'complete'" class="content-section">
        <!-- 思考完成提示 -->
        <div v-if="hasThinkingContent" class="thinking-complete-section">
          <div class="thinking-header" @click="toggleThinkingExpanded">
            <div class="thinking-title">
              <i class="fas fa-check-circle thinking-icon thinking-complete"></i>
              <span class="thinking-label">小K思考完成</span>
              <span class="thinking-time">{{ formatThinkingTime(currentThinkingDuration) }}</span>
            </div>
            <i
              v-if="!isThinkingContentShort"
              class="fas toggle-icon"
              :class="isThinkingExpanded ? 'fa-chevron-up' : 'fa-chevron-down'"
            ></i>
          </div>
          <div
            class="thinking-content"
            :class="{
              'collapsed': !isThinkingExpanded && !isThinkingContentShort,
              'expanded': isThinkingExpanded || isThinkingContentShort
            }"
            @contextmenu.prevent="showRightMenu($event)"
          >
            <streaming-text
              :content="thinkingContent"
              :is-streaming="false"
              @content-updated="$emit('content-updated')"
            />
          </div>
        </div>

        <!-- AI回复内容 -->
        <div class="response-header">
          <div class="response-title">
            <i class="fas fa-comment-dots content-icon"></i>
            <span class="content-label">小K回复</span>
          </div>
          <div class="response-actions">
            <button class="action-btn" @click="copyResponse" title="复制回复内容">
              <i class="fas fa-copy"></i>
            </button>
          </div>
        </div>
        <div class="response-content" @contextmenu.prevent="showRightMenu($event)">
          <streaming-text
            :content="displayContent"
            :is-streaming="isStreaming && streamType === 'content'"
            @content-updated="$emit('content-updated')"
          />
        </div>
      </div>
    </div>

    <!-- 右键菜单 -->
    <right-menu ref="rightMenu" @select="onSelectMenu"></right-menu>
  </div>
</template>

<script>
import HeadImage from '../common/HeadImage.vue'
import StreamingText from './StreamingText.vue'
import RightMenu from '../common/RightMenu.vue'

export default {
  name: 'AIMessageBox',
  components: {
    HeadImage,
    StreamingText,
    RightMenu
  },
  data() {
    return {
      // 思考过程是否展开（默认收缩）
      isThinkingExpanded: false,
      // 思考开始时间（用于计算思考时长）
      thinkingStartTime: null,
      // 当前思考时长（实时更新）
      currentThinkingDuration: 0,
      // 思考计时器
      thinkingTimer: null
    }
  },
  props: {
    // 消息内容（原始内容，可能包含@用户名）
    content: {
      type: String,
      default: ''
    },
    // 思考内容
    thinkingContent: {
      type: String,
      default: ''
    },
    // 回复内容（处理后的纯回复内容）
    responseContent: {
      type: String,
      default: ''
    },
    // 是否正在流式传输
    isStreaming: {
      type: Boolean,
      default: false
    },
    // 流式类型：thinking 或 content
    streamType: {
      type: String,
      default: 'content'
    },
    // 发送时间（支持Date对象或时间戳）
    sendTime: {
      type: [Date, Number],
      default: () => new Date()
    },
    // 是否完成
    isComplete: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 是否有内容显示
    hasContent() {
      return this.content && this.content.trim().length > 0
    },

    /**
     * 显示的@用户名部分（仅用于群聊AI消息）
     */
    displayAtUserName() {
      if (!this.content || !this.content.startsWith('@')) {
        return '';
      }

      // 提取@用户名部分
      const firstNewlineIndex = this.content.indexOf('\n');
      if (firstNewlineIndex !== -1) {
        return this.content.substring(0, firstNewlineIndex).trim();
      }

      return '';
    },

    // 是否有思考内容
    hasThinkingContent() {
      return this.thinkingContent && this.thinkingContent.trim().length > 0
    },

    // 思考内容是否较短（短内容默认展开）
    isThinkingContentShort() {
      if (!this.thinkingContent) return true
      // 如果内容少于200个字符或少于4行，认为是短内容
      const lines = this.thinkingContent.split('\n').length
      return this.thinkingContent.length <= 200 || lines <= 4
    },

    // 显示的内容 - 统一处理不同来源的AI消息显示
    displayContent() {
      // 优先使用传入的responseContent（已处理的纯回复内容）
      if (this.responseContent) {
        return this.responseContent
      }

      // 如果是完成状态且有思考内容，解析回复内容部分
      if (this.streamType === 'complete' && this.thinkingContent) {
        return this.parseResponseContent(this.content) || ''
      }

      // 如果是流式传输中的内容阶段
      if (this.streamType === 'content') {
        return this.content || ''
      }

      // 如果是思考阶段
      if (this.streamType === 'thinking') {
        return this.content || ''
      }

      // 默认情况：如果没有单独的思考内容，说明是从数据库加载的完整消息
      // 需要解析出回复内容部分
      if (!this.thinkingContent && this.content) {
        return this.parseResponseContent(this.content)
      }

      // 最后的默认返回
      return this.content || ''
    },
    // 格式化的发送时间
    formattedSendTime() {
      if (!this.sendTime) return ''

      // 如果是时间戳，转换为Date对象
      const date = typeof this.sendTime === 'number' ? new Date(this.sendTime) : this.sendTime

      // 格式化时间显示
      const now = new Date()
      const diff = now.getTime() - date.getTime()

      // 如果是今天，只显示时间
      if (diff < 24 * 60 * 60 * 1000) {
        return date.toLocaleTimeString('zh-CN', {
          hour: '2-digit',
          minute: '2-digit'
        })
      }

      // 否则显示日期和时间
      return date.toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
  },
  methods: {
    /**
     * 切换思考过程的展开/收缩状态
     */
    toggleThinkingExpanded() {
      this.isThinkingExpanded = !this.isThinkingExpanded
    },

    /**
     * 格式化思考时间显示
     */
    formatThinkingTime(duration) {
      if (duration < 1000) return '< 1秒'
      if (duration < 60000) return `${Math.floor(duration / 1000)}秒`
      return `${Math.floor(duration / 60000)}分${Math.floor((duration % 60000) / 1000)}秒`
    },

    /**
     * 启动思考计时器
     */
    startThinkingTimer() {
      this.thinkingStartTime = Date.now()
      this.currentThinkingDuration = 0

      // 清除之前的计时器
      if (this.thinkingTimer) {
        clearInterval(this.thinkingTimer)
      }

      // 启动新的计时器，每100ms更新一次
      this.thinkingTimer = setInterval(() => {
        if (this.thinkingStartTime) {
          this.currentThinkingDuration = Date.now() - this.thinkingStartTime
        }
      }, 100)
    },

    /**
     * 停止思考计时器
     */
    stopThinkingTimer() {
      if (this.thinkingTimer) {
        clearInterval(this.thinkingTimer)
        this.thinkingTimer = null
      }
    },

    /**
     * 显示右键菜单
     */
    showRightMenu(event) {
      const menuItems = [
        {
          key: 'COPY_ALL',
          name: '复制全部内容',
          icon: 'fas fa-copy'
        },
        {
          key: 'COPY_THINKING',
          name: '复制思考过程',
          icon: 'fas fa-brain'
        },
        {
          key: 'COPY_RESPONSE',
          name: '复制回复内容',
          icon: 'fas fa-comment-dots'
        }
      ]
      this.$refs.rightMenu.open(event, menuItems)
    },

    /**
     * 处理右键菜单选择
     */
    onSelectMenu(item) {
      switch (item.key) {
        case 'COPY_ALL':
          this.copyAllContent()
          break
        case 'COPY_THINKING':
          this.copyThinkingContent()
          break
        case 'COPY_RESPONSE':
          this.copyResponse()
          break
      }
    },

    /**
     * 复制全部内容（思考过程 + 回复内容）
     */
    copyAllContent() {
      try {
        let content = ''

        // 添加思考过程
        if (this.thinkingContent) {
          content += '📝 思考过程：\n' + this.thinkingContent + '\n\n'
        }

        // 添加回复内容
        if (this.displayContent) {
          content += '🤖 回复内容：\n' + this.displayContent
        }

        if (content) {
          this.copyToClipboard(content)
          this.$message.success('已复制全部内容')
        } else {
          this.$message.warning('没有可复制的内容')
        }
      } catch (error) {
        console.error('复制全部内容失败:', error)
        this.$message.error('复制失败')
      }
    },

    /**
     * 复制思考过程
     */
    copyThinkingContent() {
      try {
        if (this.thinkingContent) {
          this.copyToClipboard(this.thinkingContent)
          this.$message.success('已复制思考过程')
        } else {
          this.$message.warning('没有思考过程可复制')
        }
      } catch (error) {
        console.error('复制思考过程失败:', error)
        this.$message.error('复制失败')
      }
    },

    /**
     * 复制回复内容
     */
    copyResponse() {
      try {
        if (this.displayContent) {
          this.copyToClipboard(this.displayContent)
          this.$message.success('已复制回复内容')
        } else {
          this.$message.warning('没有回复内容可复制')
        }
      } catch (error) {
        console.error('复制回复内容失败:', error)
        this.$message.error('复制失败')
      }
    },

    /**
     * 复制文本到剪贴板
     */
    copyToClipboard(text) {
      if (navigator.clipboard && window.isSecureContext) {
        // 使用现代 Clipboard API
        return navigator.clipboard.writeText(text)
      } else {
        // 降级方案：使用传统方法
        const textArea = document.createElement('textarea')
        textArea.value = text
        textArea.style.position = 'fixed'
        textArea.style.left = '-999999px'
        textArea.style.top = '-999999px'
        document.body.appendChild(textArea)
        textArea.focus()
        textArea.select()

        try {
          document.execCommand('copy')
          textArea.remove()
        } catch (error) {
          textArea.remove()
          throw error
        }
      }
    },

    /**
     * 从完整的AI消息内容中解析出回复内容部分
     */
    parseResponseContent(fullContent) {
      if (!fullContent) return ''

      // 先处理群聊@用户名格式，移除开头的@用户名部分
      let content = this.removeAtUserPrefix(fullContent)

      // 查找 "🤖 *回复*" 标记
      const responseMarker = '🤖 *回复*'
      const responseIndex = content.indexOf(responseMarker)

      if (responseIndex !== -1) {
        // 提取回复内容（去掉标记后的内容）
        return content.substring(responseIndex + responseMarker.length).trim()
      }

      // 如果没有找到标记，返回原内容
      return content
    },

    /**
     * 移除群聊AI消息开头的@用户名部分
     */
    removeAtUserPrefix(content) {
      if (!content) return ''

      // 检查是否以@开头（群聊AI回复格式）
      if (content.startsWith('@')) {
        // 查找第一个换行符，移除@用户名部分
        const firstNewlineIndex = content.indexOf('\n')
        if (firstNewlineIndex !== -1) {
          // 移除@用户名和后面的空行，保留实际内容
          let remainingContent = content.substring(firstNewlineIndex + 1)
          // 移除开头的空行
          while (remainingContent.startsWith('\n')) {
            remainingContent = remainingContent.substring(1)
          }
          return remainingContent
        }
      }

      // 如果不是群聊格式，直接返回原内容
      return content
    }
  },
  watch: {
    // 监听内容变化，自动滚动到底部
    content() {
      this.$nextTick(() => {
        this.$emit('content-updated')
      })
    },

    // 监听流式类型变化，启动/停止思考计时器
    streamType: {
      handler(newType, oldType) {
        if (newType === 'thinking') {
          // 开始思考，启动计时器
          this.startThinkingTimer()
        } else if (oldType === 'thinking' && (newType === 'content' || newType === 'complete')) {
          // 思考结束，停止计时器
          this.stopThinkingTimer()
        }
      },
      immediate: true
    }
  },

  mounted() {
    // 组件挂载时如果正在思考，启动计时器
    if (this.streamType === 'thinking') {
      this.startThinkingTimer()
    }
  },

  beforeDestroy() {
    // 组件销毁前清除计时器
    this.stopThinkingTimer()
  }
}
</script>

<style lang="scss" scoped>
@use "@/styles/variables.scss" as *;

.ai-message-box {
  width: 100%;
  max-width: 100%; // 占满全部宽度，确保内容完全显示
  margin: var(--im-spacing-md, 16px) 0;
  padding: 0;
  background: linear-gradient(135deg, var(--im-bg-secondary, #f8f9ff) 0%, var(--im-bg-tertiary, #f0f4ff) 100%);
  border: 1px solid var(--im-border-color, #e1e8ff);
  border-radius: var(--im-border-radius-lg, 16px);
  box-shadow: var(--im-box-shadow-base, 0 2px 12px rgba(0, 0, 0, 0.08));
  transition: all var(--im-transition-base, 0.3s ease);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;

  &.is-streaming {
    border-color: var(--im-color-primary, #409eff);
    box-shadow: 0 2px 16px rgba(64, 158, 255, 0.15);

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--im-color-primary, #409eff), transparent);
      animation: streaming-progress 2s infinite;
    }
  }

  .ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--im-spacing-sm, 12px) var(--im-spacing-md, 16px);
    border-bottom: 1px solid var(--im-border-color-light, #e8f0ff);
    background: linear-gradient(135deg, var(--im-bg-secondary, rgba(255, 255, 255, 0.8)) 0%, var(--im-bg-tertiary, rgba(248, 249, 255, 0.9)) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    .ai-avatar {
      margin-right: var(--im-spacing-xs, 8px);
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 8px;
        height: 8px;
        background: var(--im-color-success, #67c23a);
        border: 2px solid white;
        border-radius: 50%;
        animation: online-pulse 2s infinite;
      }
    }

    .ai-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;

      .ai-name {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: var(--im-font-size-base, 14px);
        font-weight: var(--im-font-weight-semibold, 600);
        color: var(--im-color-primary, #409eff);

        .ai-robot-icon {
          font-size: 12px;
          color: var(--im-color-primary, #409eff);
          animation: robot-glow 3s infinite;
        }
      }

      .ai-time {
        font-size: var(--im-font-size-sm, 12px);
        color: var(--im-text-color-secondary, #909399);
      }
    }

    .ai-status {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      background: rgba(103, 194, 58, 0.1);
      border-radius: 12px;
      transition: all 0.3s ease;

      &.active {
        background: rgba(64, 158, 255, 0.1);

        .status-dot {
          background: var(--im-color-primary, #409eff);
          animation: status-pulse 1.5s infinite;
        }
      }

      .status-dot {
        width: 6px;
        height: 6px;
        background: var(--im-color-success, #67c23a);
        border-radius: 50%;
        transition: all 0.3s ease;
      }

      .status-text {
        font-size: 11px;
        color: var(--im-text-color-secondary, #909399);
        font-weight: 500;
      }
    }
  }

  .ai-content-container {
    padding: var(--im-spacing-md, 16px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden; // 防止横向滚动条
  }

  .thinking-section {
    margin-bottom: var(--im-spacing-md, 16px);

    .thinking-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--im-spacing-xs, 8px);
      padding: var(--im-spacing-xs, 8px) var(--im-spacing-sm, 12px);
      background: linear-gradient(135deg, rgba(64, 158, 255, 0.1) 0%, rgba(64, 158, 255, 0.05) 100%);
      border-radius: var(--im-border-radius-base, 8px);
      border: 1px solid rgba(64, 158, 255, 0.2);

      .thinking-title {
        display: flex;
        align-items: center;
        gap: 8px;

        .thinking-icon {
          color: var(--im-color-primary, #409eff);
          animation: brain-pulse 2s infinite;
          font-size: 16px;
        }

        .thinking-label {
          font-size: var(--im-font-size-sm, 13px);
          font-weight: var(--im-font-weight-semibold, 600);
          color: var(--im-color-primary, #409eff);
        }

        .thinking-time-live {
          font-size: 11px;
          color: var(--im-color-primary, #409eff);
          background: rgba(64, 158, 255, 0.1);
          padding: 2px 8px;
          border-radius: 10px;
          margin-left: 8px;
          font-weight: 600;
          animation: time-pulse 1s infinite;
        }
      }

      .thinking-progress {
        display: flex;
        align-items: center;
        gap: 12px;

        .progress-bar {
          width: 60px;
          height: 3px;
          background: rgba(64, 158, 255, 0.2);
          border-radius: 2px;
          overflow: hidden;

          .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--im-color-primary, #409eff), rgba(64, 158, 255, 0.6));
            border-radius: 2px;
            animation: progress-flow 2s infinite;
          }
        }

        .thinking-dots {
          display: flex;
          gap: 4px;

          .dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--im-color-primary, #409eff);
            animation: thinking-dots 1.4s infinite ease-in-out;

            &:nth-child(1) { animation-delay: -0.32s; }
            &:nth-child(2) { animation-delay: -0.16s; }
            &:nth-child(3) { animation-delay: 0s; }
          }
        }
      }
    }

    .thinking-content {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 255, 0.8) 100%);
      padding: var(--im-spacing-md, 16px);
      border-radius: var(--im-border-radius-base, 8px);
      border: 1px solid rgba(64, 158, 255, 0.15);
      border-left: 4px solid var(--im-color-primary, #409eff);
      font-size: var(--im-font-size-base, 14px);
      line-height: 1.7;
      color: var(--im-text-color-primary, #606266);
      white-space: pre-wrap;
      word-wrap: break-word;
      overflow-wrap: break-word;
      max-height: none;
      overflow: visible;
      width: 100%;
      box-sizing: border-box;
      position: relative;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--im-color-primary, #409eff), transparent);
        animation: thinking-glow 3s infinite;
      }
    }
  }

  // 内容阶段样式
  .content-section {
    margin-top: var(--im-spacing-sm, 12px);
  }

  // 思考完成区域样式
  .thinking-complete-section {
    margin-bottom: var(--im-spacing-sm, 12px);
    padding: var(--im-spacing-sm, 12px);
    background: linear-gradient(135deg, rgba(103, 194, 58, 0.12) 0%, rgba(103, 194, 58, 0.06) 100%);
    border-radius: var(--im-border-radius-lg, 12px);
    border: 1px solid rgba(103, 194, 58, 0.25);
    border-left: 4px solid var(--im-color-success, #67c23a);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--im-color-success, #67c23a), transparent);
      opacity: 0.6;
    }

    .thinking-header {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--im-spacing-xs, 8px) var(--im-spacing-sm, 12px);
      margin: -4px -8px 8px;
      user-select: none;
      transition: all var(--im-transition-base, 0.3s ease);
      border-radius: var(--im-border-radius-base, 8px);

      &:hover {
        background: rgba(103, 194, 58, 0.08);
        transform: translateY(-1px);
      }

      .thinking-title {
        display: flex;
        align-items: center;
        gap: 8px;

        .thinking-icon {
          color: var(--im-color-success, #67c23a);
          font-size: 16px;
          animation: success-glow 2s infinite;

          &.thinking-complete {
            animation: check-bounce 0.6s ease-out;
          }
        }

        .thinking-label {
          font-size: var(--im-font-size-sm, 13px);
          font-weight: var(--im-font-weight-semibold, 600);
          color: var(--im-color-success, #67c23a);
        }

        .thinking-time {
          font-size: 11px;
          color: var(--im-text-color-secondary, #909399);
          background: rgba(103, 194, 58, 0.1);
          padding: 2px 6px;
          border-radius: 10px;
          margin-left: 8px;
        }
      }

      .toggle-icon {
        font-size: 12px;
        color: var(--im-color-success, #67c23a);
        transition: transform var(--im-transition-base, 0.3s ease);
        margin-left: auto;
      }
    }

    .thinking-content {
      transition: all var(--im-transition-base, 0.3s ease);
      overflow: hidden;
      background: rgba(255, 255, 255, 0.6);
      border-radius: var(--im-border-radius-base, 8px);
      padding: var(--im-spacing-sm, 12px);

      &.collapsed {
        max-height: 80px;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 30px;
          background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
          pointer-events: none;
        }
      }

      &.expanded {
        max-height: none;
      }
    }
  }

  // 回复区域样式
  .response-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--im-spacing-xs, 8px);
    padding: var(--im-spacing-xs, 8px) var(--im-spacing-sm, 12px);
    background: linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, rgba(64, 158, 255, 0.04) 100%);
    border-radius: var(--im-border-radius-base, 8px);
    border: 1px solid rgba(64, 158, 255, 0.15);

    .response-title {
      display: flex;
      align-items: center;
      gap: 8px;

      .content-icon {
        color: var(--im-color-primary, #409eff);
        font-size: 16px;
        animation: response-glow 3s infinite;
      }

      .content-label {
        font-size: var(--im-font-size-sm, 13px);
        font-weight: var(--im-font-weight-semibold, 600);
        color: var(--im-color-primary, #409eff);
      }
    }

    .response-actions {
      display: flex;
      gap: 6px;

      .action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: rgba(64, 158, 255, 0.1);
        border: 1px solid rgba(64, 158, 255, 0.2);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        color: var(--im-color-primary, #409eff);

        &:hover {
          background: rgba(64, 158, 255, 0.15);
          border-color: rgba(64, 158, 255, 0.3);
          transform: translateY(-1px);
        }

        &:active {
          transform: translateY(0);
        }

        i {
          font-size: 12px;
        }
      }
    }
  }

  .response-content {
    padding: var(--im-spacing-md, 16px);
    background: var(--im-response-bg, linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 251, 255, 0.9) 100%));
    border-radius: var(--im-border-radius-lg, 12px);
    border: 1px solid rgba(64, 158, 255, 0.15);
    border-left: 4px solid var(--im-color-primary, #409eff);
    font-size: var(--im-font-size-base, 14px);
    line-height: 1.7;
    color: var(--im-text-color-primary, #606266);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--im-color-primary, #409eff), transparent);
      opacity: 0.4;
    }
  }
}

// 动画效果
@keyframes streaming-progress {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes thinking-dots {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

// 新增动画效果
@keyframes online-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes robot-glow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(64, 158, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 10px rgba(64, 158, 255, 0.6);
  }
}

@keyframes status-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

@keyframes brain-pulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.05);
    filter: brightness(1.2);
  }
}

@keyframes progress-flow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

@keyframes thinking-glow {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes success-glow {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 0 0 5px rgba(103, 194, 58, 0.3);
  }
  50% {
    filter: brightness(1.2);
    text-shadow: 0 0 10px rgba(103, 194, 58, 0.6);
  }
}

@keyframes check-bounce {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes response-glow {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 0 0 5px rgba(64, 158, 255, 0.3);
  }
  50% {
    filter: brightness(1.1);
    text-shadow: 0 0 8px rgba(64, 158, 255, 0.5);
  }
}

// @用户名显示样式
.at-user-section {
  margin: var(--im-spacing-xs, 8px) var(--im-spacing-md, 16px);
  padding: var(--im-spacing-xs, 8px) 0;

  .at-user-name {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: linear-gradient(135deg, rgba(64, 158, 255, 0.15) 0%, rgba(64, 158, 255, 0.08) 100%);
    color: var(--im-color-primary, #409eff);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(64, 158, 255, 0.2);
    position: relative;

    &::before {
      content: '@';
      margin-right: 2px;
      font-weight: 700;
    }

    &::after {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
      background: linear-gradient(135deg, var(--im-color-primary, #409eff), transparent);
      border-radius: 16px;
      opacity: 0.1;
      z-index: -1;
    }
  }
}

@keyframes time-pulse {
  0%, 100% {
    background: rgba(64, 158, 255, 0.1);
    transform: scale(1);
  }
  50% {
    background: rgba(64, 158, 255, 0.2);
    transform: scale(1.05);
  }
}

// === 深色模式适配 ===
:root[data-theme='dark'] {
  .ai-message-box {
    background: linear-gradient(135deg, var(--im-bg-tertiary) 0%, var(--im-bg-secondary) 100%);
    border-color: var(--im-border-color);
    box-shadow: var(--im-box-shadow-base);

    &.is-streaming {
      border-color: var(--im-color-primary);
      box-shadow: 0 2px 16px rgba(64, 158, 255, 0.25);

      &::before {
        background: linear-gradient(90deg, transparent, var(--im-color-primary), transparent);
      }
    }

    .ai-header {
      background: linear-gradient(135deg, var(--im-bg-secondary) 0%, var(--im-bg-primary) 100%);
      border-bottom-color: var(--im-border-color);

      .ai-info {
        .ai-name {
          color: var(--im-color-primary);

          .ai-robot-icon {
            color: var(--im-color-primary);
          }
        }

        .ai-time {
          color: var(--im-text-color-secondary);
        }
      }

      .ai-status {
        background: rgba(64, 158, 255, 0.15);

        &.active {
          background: rgba(64, 158, 255, 0.2);
        }

        .status-text {
          color: var(--im-text-color-secondary);
        }
      }
    }

    .at-user-section {
      .at-user-name {
        background: linear-gradient(135deg, rgba(64, 158, 255, 0.2) 0%, rgba(64, 158, 255, 0.1) 100%);
        color: var(--im-color-primary);
        border-color: rgba(64, 158, 255, 0.3);
      }
    }

    .thinking-section {
      .thinking-header {
        background: linear-gradient(135deg, rgba(64, 158, 255, 0.15) 0%, rgba(64, 158, 255, 0.08) 100%);
        border-color: rgba(64, 158, 255, 0.3);

        .thinking-title {
          .thinking-time-live {
            background: rgba(64, 158, 255, 0.2);
            color: var(--im-color-primary);
          }
        }
      }

      .thinking-content {
        background: linear-gradient(135deg, var(--im-bg-secondary) 0%, var(--im-bg-primary) 100%);
        color: var(--im-text-color-primary);
        border-color: rgba(64, 158, 255, 0.25);
      }
    }

    .thinking-complete-section {
      background: linear-gradient(135deg, rgba(103, 194, 58, 0.15) 0%, rgba(103, 194, 58, 0.08) 100%);
      border-color: rgba(103, 194, 58, 0.3);

      .thinking-header {
        background: transparent;

        &:hover {
          background: rgba(103, 194, 58, 0.1);
        }

        .thinking-title {
          .thinking-time {
            background: rgba(103, 194, 58, 0.2);
            color: var(--im-color-success);
          }
        }
      }

      .thinking-content {
        background: linear-gradient(135deg, var(--im-bg-secondary) 0%, var(--im-bg-primary) 100%);
        color: var(--im-text-color-primary);

        &.collapsed::after {
          background: linear-gradient(transparent, var(--im-bg-secondary));
        }
      }
    }

    .response-header {
      background: linear-gradient(135deg, rgba(64, 158, 255, 0.12) 0%, rgba(64, 158, 255, 0.06) 100%);
      border-color: rgba(64, 158, 255, 0.25);

      .response-title {
        .content-label {
          color: var(--im-color-primary);
        }
      }

      .response-actions {
        .action-btn {
          background: rgba(64, 158, 255, 0.15);
          border-color: rgba(64, 158, 255, 0.3);
          color: var(--im-color-primary);

          &:hover {
            background: rgba(64, 158, 255, 0.25);
            border-color: rgba(64, 158, 255, 0.4);
          }
        }
      }
    }

    .response-content {
      background: linear-gradient(135deg, var(--im-bg-secondary) 0%, var(--im-bg-primary) 100%);
      color: var(--im-text-color-primary);
      border-color: rgba(64, 158, 255, 0.25);
    }
  }


}


</style>
